<template>
	<view>
		<u-tabs :list="tabbarList" :is-scroll="false" :current="current" active-color="rgb(255,97,94)" @change="change">
		</u-tabs>
		<view class="order">

			<u-search placeholder="搜一搜" v-model="keyword" :show-action="false" @change="search()"></u-search>
			<view class="orderItem" v-for="(item ,index) in list" @click="orderItem(item)">
				<view class="orderTop">
					<view class="">
						订单号：{{item.order_id}}
					</view>
					<view class="">
						付款：{{item.time_a}}
					</view>
				</view>

				<view class="activityItem">
					<view class="activityImg">
						<image :src="item.pic_s" mode="aspectFill">
						</image>
					</view>
					<view class="activityText">
						<view class="name">
							{{item.title}}
						</view>
						<view class="label">
							<view class="">
								{{item.school_title}}
							</view>
							<view class="">
								{{item.applicable}}
							</view>
							<view class="">
								{{item.pattern}}
							</view>
						</view>
						<view class="money">
							<text
								style="font-size: 26upx;">￥</text>{{item.status==1?(item.type==1?item.price:(item.type==2?item.price_a:(item.price*100-item.hagg_price*100)/100)):item.price_pay}}
						</view>
					</view>
					<view class="activityBtn">
						<view class="">
							<view class="pin" v-if="item.code1!=-1">
								拼
							</view>
							<view class="kan" v-if="item.code2!=-1">
								砍
							</view>
						</view>

					</view>
				</view>
				<view class="" style="font-size: 24upx;color: #77787e;display: flex;"
					v-if="item.typeText=='邀请好友'||item.typeText=='去砍价'">
					<block v-if="item.typeText!='去砍价'">
						实付款：<text style="color: rgb(255,97,94);margin-right: 15upx;">￥{{item.price_pay}} </text> <text
							style="color: rgb(255,97,94);" v-if="type==3">已砍{{item.hagg_price}}</text> 还差<text
							style="color: rgb(255,97,94);">{{type==3?item.hagg_price:item.spell_num - item.spell_nums}}</text>人
					</block>

					<block v-else>
						已砍<text style="color: rgb(255,97,94);">￥{{item.hagg_price}}</text>
					</block>



					<view class="" style="margin-left: 25upx;">
						<text style="margin-right: 15upx;">剩</text>
						<u-count-down :timestamp="item.countdown" font-size="24" color="#77787e"></u-count-down>
					</view>
				</view>
				<view class="operation">
					<view class=""
						:style="{background:item.status==1||item.status==2?'rgb(255,97,94)':'rgb(247,247,247)',color:item.status==1||item.status==2?'#fff':''}"
						@click.stop="navRoute(item)">
						{{item.typeText}}
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarList: [{
					name: '全部'
				}, {
					name: '课程'
				}, {
					name: '拼团'
				}, {
					name: '砍价'
				}, {
					name: '未付款'
				}, {
					name: '已付款'
				}, {
					name: '退款'
				}],
				current: 0,
				list: [],
				keyword: ''
			}
		},
		onShow() {
			let data = {}
			if (this.current != 0 && this.current < 4) data.type = this.current
			if (this.current >= 4) data.status = this.current - 3
			this.newData(data)
		},
		methods: {
			newData(data = {}) {
				this.$myRuquest('home/user/order_list', data).then(res => {
					if (res.code == 400) {
						this.list = res.data
						this.list.forEach(item => {
							switch (+item.status) {
								case 1:
									if (item.type == 1) {
										item.typeText = '未付款'
									} else if (item.type == 2) {
										item.typeText = '去拼团'
									} else {
										if (item.hagg_zt == 2) {
											item.typeText = '去付款'
										} else {
											item.typeText = '去砍价'
										}
									}
									break;
								case 2:
									item.typeText = '邀请好友'
									break;
								case 3:
									if (item.comm_zt == 2) {
										item.typeText = '已评价'
									} else {
										item.typeText = '评价'
									}
									break;
								case 4:
									item.typeText = '退款中'
									break;
								case 5:
									item.typeText = '已取消'
									break;
								case 6:
									item.typeText = '退款成功'
									break;

								default:
									item.typeText = '未知'
									break;
							}
							if (!item.time_a) return item.time_a = '未付款';
							// item.time_a =this.$u.timeFrom(item.time_a);
							item.time_a = this.$u.timeFormat(item.time_a, 'yyyy-mm-dd hh:MM');
							// item.time_a = this.getLocalTime(item.time_a)
						})
					}
				})
			},
			search(text) {
				// console.log(text)
				let data = {
					title: text
				}
				if (this.current != 0 && this.current < 4) data.type = this.current
				if (this.current >= 4) data.status = this.current - 3
				console.log(data)
				this.$u.throttle(this.newData(data), 500)
			},
			getLocalTime(nS) {
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
			},
			change(index) {
				this.keyword = ''
				this.current = index
				let data = {}
				if (index == 0) {
					this.newData()
				} else if (index < 4) {
					this.newData({
						type: index
					})
				} else {
					this.newData({
						status: index - 3
					})
				}

			},
			navRoute(item) {
				// if (item.typeText == '未付款'){
				// 	this.$myRuquest('')
				// 	uni.requestPayment({
				// 		provider: 'wxpay',
				// 		nonceStr: data.nonceStr,
				// 		package: data.package,
				// 		paySign: data.paySign,
				// 		signType: data.signType,
				// 		timeStamp:data.timeStamp,
				// 		success:function(res){
				// 			that.$refs.uToast.show({
				// 				url: '/pages/me/order/order',
				// 				title: '支付成功'
				// 			})
				// 		},
				// 		fail:function(err){
				// 			console.log(err)
				// 			that.$refs.uToast.show({
				// 				title: '支付失败'
				// 			})
				// 		}
				// 	})
				// }else 
				if (item.typeText == '已评价') {
					uni.navigateTo({
						url: `/pages/me/myComment/myComment?order_id=${item.order_id}`
					});
				} else if (item.typeText == '评价') {
					uni.navigateTo({
						url: `../addEvaluate/addEvaluate?order_id=${item.order_id}`
					});
				} else if (item.typeText == '邀请好友') {
					uni.navigateTo({
						url: `../../organizationDetails/clusterHelp/foundCluster?order_id=${item.order_id}`
					});
				} else if (item.typeText == "去付款") {
					uni.navigateTo({
						url: `../../organizationDetails/foundOrder/foundOrder?order_id=${item.order_id}&courId=${item.cour_id}&code=true`
					});
				} else if (item.typeText == "未付款") {
					uni.navigateTo({
						url: `../../organizationDetails/foundOrder/foundOrder?order_id=${item.order_id}&courId=${item.cour_id}&code=true&type=${item.type}`
					});
				} else if (item.typeText == "去拼团") {
					uni.navigateTo({
						url: `../../organizationDetails/foundOrder/foundOrder?order_id=${item.order_id}&courId=${item.cour_id}&type=${item.type}&code=true&round_id=${item.round_id}`
					});
				} else if (item.typeText == "去砍价") {
					uni.navigateTo({
						url: `../../organizationDetails/bargain/bargain?order_id=${item.order_id}`
					});
				} else {
					uni.navigateTo({
						url: `./orderList/orderList?order_id=${item.order_id}`
					});
				}
				// if (item.status == 3) {
				// 	if (item.comm_zt == 2) {
				// 		uni.navigateTo({
				// 			url: `/pages/me/myComment/myComment?order_id=${item.order_id}`
				// 		});
				// 	} else {
				// 		uni.navigateTo({
				// 			url: `../addEvaluate/addEvaluate?order_id=${item.order_id}`
				// 		});
				// 	}
				// } else if (item.status == 2) {
				// 	uni.navigateTo({
				// 		url: `../../organizationDetails/clusterHelp/foundCluster?order_id=${item.order_id}`
				// 	});
				// } else if (item.status == 4 || item.status == 5 || item.status == 6) {
				// 	uni.navigateTo({
				// 		url: `./orderList/orderList?order_id=${item.order_id}`
				// 	});
				// } else {
				// 	if (item.hagg_zt == 2) {
				// 		uni.navigateTo({
				// 			url: `../../organizationDetails/foundOrder/foundOrder?order_id=${item.order_id}&courId=${item.cour_id}&code=true`
				// 		});
				// 	} else {
				// 		uni.navigateTo({
				// 			url: `../../organizationDetails/bargain/bargain?order_id=${item.order_id}`
				// 		});
				// 	}

				// }

			},
			orderItem(item) {
				if (item.typeText == '去付款' ||item.typeText ==  '去砍价') return;
				uni.navigateTo({
					url: `./orderList/orderList?order_id=${item.order_id}`
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.order {
		background-color: rgb(247, 247, 247);
		padding: 20upx;
		min-height: calc(100vh - 80upx);

		.orderItem {
			background-color: #fff;
			border-radius: 12upx;
			padding: 20upx;
			margin: 20upx 0;

			.orderTop {
				display: flex;
				font-size: 22upx;
				color: #9d9d9d;
				margin-bottom: 20upx;

				view {
					flex: 1;
				}

				view:nth-child(2) {
					text-align: right;
				}
			}
		}
	}

	.activityItem {
		display: flex;
		position: relative;
		margin-bottom: 20upx;

		.activityImg {
			width: 150upx;
			height: 150upx;
			border-radius: 12upx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.activityText {
			margin: 0 20upx;
			width: calc(100% - 190upx);

			.name {
				font-weight: 900;
			}

			.label {
				display: flex;
				font-size: 24upx;
				margin: 14upx 0;
				color: #767676;

				view {

					margin-left: 10upx;
					margin-right: 20upx;
					background-color: #F4F5F7;
					padding: 0 10upx;
					border-radius: 7upx;
				}



				// view:nth-child(1),
				// view:nth-child(2) {
				// 	border-right: 1upx solid #a8a8a8;

				// }


			}

			.money {
				color: rgb(255, 97, 94);
				font-weight: 900;
				font-size: 36upx;
			}
		}
	}

	.activityBtn {
		position: absolute;
		right: 0;
		height: 100%;
		display: inline-block;

		>view:nth-child(1) {
			display: flex;
			font-size: 18upx;
			color: #fff;


			view {
				width: 30upx;
				height: 30upx;
				line-height: 30upx;
				border-radius: 4upx;
				text-align: center;
				margin-left: 20upx;
			}

			.pin {
				background: linear-gradient(to bottom right, rgb(254, 162, 120), rgb(253, 61, 93));

			}

			.kan {
				background: linear-gradient(to bottom right, rgb(254, 188, 128), rgb(254, 153, 47));
			}
		}
	}

	.operation {
		height: 50upx;

		view {
			float: right;
			width: 120upx;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			border-radius: 12upx;
		}

	}
</style>
